<template>
  <div style="height: 100%">
    <ag-grid-vue
      style="width: 100%; height: 400px;"
      class="ag-theme-quartz"
      :columnDefs="columnDefs"
      @grid-ready="onGridReady"
      :rowData="rowData">
    </ag-grid-vue>
  </div>
</template>

<script>
export default {
  data(){
    return{
      gridApi: null,
      columnDefs:[
        { headerName: "Col 1", colId: "firstCol", field: "height", filter: "agMultiColumnFilter" ,flex: 1,},
        { headerName: "Col 3", field: "height" ,flex: 1,},
      ],
      rowData:[
        {
          firstCol: '2',
          height: '2',
          firstCol: '2',
          firstCol: '2',
        }
      ]
    }
  },
  methods:{
    onGridReady(params){
      this.gridApi = params.api;
    }
  }
}
</script>